<script type="text/javascript">
    $(document).ready(function(){
        $('#button_id').click(function(){
            var isHidden = $("#chat_mrrdam .message_item_content" ).is( ":hidden" );
            alert(isHidden);
        });
        //show more message
        $('.message_area').on( "click",'.my_message_more', function() {
            var parent = $(this).closest('.message_item'); 
            var client ='tb_' + parent.find('h2').text();
            var limit = $("#"+client).val();
            $("#"+client).val(parseInt(limit) +5);
            var idChat = 'chat_'+parent.find('h2').text();
            $.getMessage_sub(idChat,parent.find('h2').text(),'Top');
        });
        // Show or hide cua so chat
        $('.message_area').on('click','.message_title',function(){
            var parent = $(this).closest('.message_item');
            parent.find('.message_item_content').toggle();
            parent.find('.message_texbox').toggle();
            parent.find('h2').toggle();
            parent.find('ul').scrollTop(parent.find('ul')[0].scrollHeight);
            var isHidden =  parent.find('img').is( ":visible" );
            if(isHidden == true)
            {
                parent.find('.img_id_chat').hide();
            }
        });

        // Close chat message
        $('.message_area').on('click','.close_message',function(){
            var parent = $(this).closest('.message_item');
            parent.find('input').val('');
            $(this).closest('.message_item').hide();
        });

        // Su kien nhan enter
        $('.message_area').on('keyup','.tb_message',function(event){
            if(event.which == 13){
                var parent = $(this).closest('.message_item');
                var content = $(this).val();
                var userclient = parent.find('h2').text();
                var idChat = 'chat_'+parent.find('h2').text();
                $.post('~chat/insertChat',{userClent : userclient, content : content} , function(data){
                    $(this).val('');
                    var sHtml = '<li class="my_message" title="'+data+'">' + content + "</li>";
                    var client ='tb_' + parent.find('h2').text();
                    var limit = $("#"+client).val();
                    $("#"+client).val(parseInt(limit) +1);
                    parent.find('ul').append(sHtml);
                    parent.find('input').val('');
                    parent.find('ul').scrollTop(parent.find('ul')[0].scrollHeight);
                });
            }
        });

        // Su kien click vao tung nguoi dung
        $('.list_user_chat').on('click','li',function(){
            // Get userclient
            var title = $(this).text();
            $.creatScreenChat(title);
        });
    });
    (function( $ ){
        $.creatScreenChat = function(title)
        {
            var sId = 'chat_' + title;
            if($('#' + sId).length > 0){
                $('#' + sId).show();
                $('#' + sId).find('.message_item_content').css('display','block');
                $('#' + sId).find('.message_texbox').css('display','block');
                $('#' + sId).find('h2').css('display','none');
                $('#' + sId).find('ul').scrollTop($('#' + sId).find('ul')[0].scrollHeight);
                return;
            }
            var messageItem = $('<div>');
            messageItem.attr('id',sId);
            messageItem.addClass('message_item');
            var img= $('#path').val()+ 'image/message';
            var sHtml = '';
            sHtml +=    '<h2 class="message_title">' + title + '<img class="img_id_chat" id="img_'+title+'" hidden="" style=" padding-left: 20px;height:20px;width=20px;" src="'+img+'"><div class="close_message"></div></h2>';
            sHtml +=    '<div class="message_texbox">';
            sHtml +=    '<input class="tb_message" type="text">';
            sHtml +=    '</div>';
            sHtml +=    '<div class="message_item_content list_friend_inline">';
            sHtml +=        '<div class="message_title">' + title + '<div class="close_message"></div></div>';
            sHtml +=        '<ul class="list_user_chat">';
            sHtml +=        '<li id="in_'+title+'"><li>';
            sHtml +=        '</ul>';
            sHtml +=    '</div>';
            messageItem.append(sHtml);
            console.log(messageItem);
            $('.message_area').append(messageItem);
            messageItem.find('.message_item_content').css('display','block');
            messageItem.find('.message_texbox').css('display','block');
            messageItem.find('h2').css('display','none');
            $.getMessage_sub(sId,title,'Bot');
        };
        // 1->get message limitvalue, 0->getmessage append, scroll index
        $.getMessage_sub = function(id,userclient,scroll)
        {
            var client ='tb_' + userclient;
            var limit = $("#"+client).val();
            var userSer ='';
            userSer = $('#userSer').val();
            $.post('~chat/displayMessage_sub',{userclient :userclient,limit : limit},function(data){
                if(data!= '')
                {
                    if(scroll == 'Bot')
                    {
                        $('#'+id+' .list_user_chat').append(data);
                        $('#'+id+' .list_user_chat').scrollTop($('#'+id+' .list_user_chat')[0].scrollHeight);
                    }
                    else
                    {
                        var show_more = $('#'+id+' .list_user_chat .my_message_more').text();
                        if(show_more != '')
                        {
                            $('#li_'+ userclient ).remove();
                            $(data).insertAfter('#in_'+userclient);
                        }                        
                    }
                }
            });
        }; 
        $.getUserOnline_sub = function()
        {
            $.post('~chat/getUser_sub',{},function(data){
                if(data !='')
                {
                    $('.message_area #list_friend_inline').empty();
                    $('#tb_limit_div').empty();
                    var aUser =data.split('--');
                    for (var i = 0; i < aUser.length; i++) {
                        if(aUser[i]!='')
                        {
                            var user =aUser[i].split(';;');
                            $('.message_area #list_friend_inline').append(user[0]);
                            $('#tb_limit_div').append(user[1]);
                        }
                    }
                }

            });
        };
        $.sendMessage_sub = function(content,time) // userLogin, content, time(h,i)
        {
            $('#fillContentChat').append('<li class="'+my_message+'" title="'+time+'">'+content+'</li>');
            var client ='tb_' + $('#userClient').val();
            var limit = $("#"+client).val();
            $("#"+client).val(parseInt(limit) +1);
        };
    })( jQuery );
</script>

<div class="message_area">
    <!-- List friend -------------------->
    <div class="list_friend message_item">
        <h2 class="message_title">Chat</h2>
        <div class="message_texbox">
            <input type="text">
        </div>
        <div class="message_item_content list_friend_inline">
            <div class="message_title">Chat</div>
            <ul id="list_friend_inline" class="list_user_chat">
                <?php
                    $aUser = $template->get('aUser'); 
                    if(count($aUser))
                    {
                        foreach($aUser as $user)
                        {
                            $status ='';
                            if($user->online == 1)
                                $status = 'online';
                            else
                                $status = 'offline';
                            echo ' <li val="'.$user->user_id.'"><img style=" margin-right: 5px;" src="'.URL::getLink("image/$status").'">'.$user->user_id.'</li>';
                        }
                    }
                ?>
            </ul>
        </div>
    </div>
    <!-- Cac cua so dang chat o day ----->
</div>
<button hidden="" id="button_id"> Test</button>
<input hidden="" id="userSer" value="<?php echo $_SESSION['username'] ; ?>"></input>
<div hidden="" id="tb_limit_div"  style=" float: left; min-height: 100px; width: 100px; border:1px solid #333; ">
    <?php
        $aUser = $template->get('aUser'); 
        if(count($aUser))
        {
            foreach($aUser as $user)
            {
                echo '<input id="tb_'.$user->user_id.'" value = "10" style ="width:97%"></input>';
            }
        }
    ?>
</div>